<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>JS获得元素属性</title>
    <style>
        body, ul {
            margin: 0;
            padding: 0;
        }

        .banner {
            width: 100%;
            height: 450px;
        }

        .banner > a {
            display: block;
            width: 100%;
            height: 100%;
        }

        .banner > a > img {
            width: 100%;
            height: 100%;

        }

        .small-banner-area {
            width: 110px;
            height: 340px;

            position: absolute;
            right: 50px;
            top: 110px;
        }

        .small-banner-area > ul {
            list-style: none;
        }

        .small-banner-area > ul > li {
            width: 100%;
            height: 62px;
            margin-bottom: 10px;
        }

        .small-banner-area > ul > li a {
            display: block;
            width: 100%;
            height: 100%;
        }

        .small-banner-area > ul > li a img {
            width: 100%;
            height: 100%;

        }
    </style>
</head>
<body>

<img src="images/small-banner1.png" class="small-banner">
数量:<input type="text" value="8" class="pronumber">


<!-- 示例 横幅图片切换-->
<div class="banner">
    <a href="">
        <img src="images/big-banner1.jfif">
    </a>
</div>


<div class="small-banner-area">
    <ul>
        <li><a href=""><img src="images/small-banner1.png" onmouseover="changeImg(1)"></a></li>
        <li><a href=""><img src="images/small-banner2.png" onmouseover="changeImg(2)"></a></li>
        <li><a href=""><img src="images/small-banner3.png" onmouseover="changeImg(3)"></a></li>
        <li><a href=""><img src="images/small-banner4.png" onmouseover="changeImg(4)"></a></li>
        <li><a href=""><img src="images/small-banner5.png" onmouseover="changeImg(5)"></a></li>
    </ul>
</div>


<!--将数组中的商品 渲染到以下 ul中-->
<ul class="pro-list">


</ul>

<script src="js/js_03_获得元素属性.js"></script>
</body>
</html>